<template>
  <div class="maintenance-header">
    <el-card class="box-cardcha">
      <!-- 标题和操作按钮 -->
      <div class="header-title">
        <h2>润滑油更换</h2>
        <div class="header-actions">
          <el-button type="primary" plain size="small" @click="handleExport">
            导出
          </el-button>
          <el-button type="primary" plain size="small" @click="handlePrint">
            打印
          </el-button>
        </div>
      </div>

      <!-- 设备信息 -->
      <div class="device-info">
        <el-row :gutter="20">
          <el-col :span="8">
            <div class="info-item">
              <span class="label">设备名称：</span>
              <span class="value">{{ deviceInfo.name }}</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="info-item">
              <span class="label">规格型号：</span>
              <span class="value">{{ deviceInfo.model }}</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="info-item">
              <span class="label">存放位置：</span>
              <span class="value">{{ deviceInfo.location }}</span>
            </div>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="8">
            <div class="info-item">
              <span class="label">设备编号：</span>
              <span class="value">{{ deviceInfo.number }}</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="info-item">
              <span class="label">设备类型：</span>
              <span class="value">{{ deviceInfo.type }}</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="info-item">
              <span class="label">使用部门：</span>
              <span class="value">{{ deviceInfo.department }}</span>
            </div>
          </el-col>
        </el-row>
      </div>

      <!-- 标签页 -->
      <div class="tabs-container">
        <el-tabs v-model="activeTab">
          <el-tab-pane label="任务信息" name="task">
            <el-card class="box-cardxx">
              <div slot="header" class="card-header">
                <span>基础信息</span>
              </div>
              <el-form :model="formData" label-width="140px" class="info-form">
                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item label="任务编号：">
                      <el-input v-model="formData.taskNo" disabled>
                      </el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="任务名称：">
                      <el-input v-model="formData.taskName" disabled>
                      </el-input>
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item label="计划名称：">
                      <el-input v-model="formData.planName" disabled>
                      </el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="任务计划序号：">
                      <el-input v-model="formData.planNo" disabled>
                      </el-input>
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item label="任务计划开始时间：">
                      <el-input v-model="formData.startTime" disabled>
                      </el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="任务计划结束时间：">
                      <el-input v-model="formData.endTime" disabled>
                      </el-input>
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item label="任务类型：">
                      <el-input v-model="formData.taskType" disabled>
                      </el-input>
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row :gutter="20">
                  <el-col :span="24">
                    <el-form-item label="备注：">
                      <el-input type="textarea" v-model="formData.remark" :rows="3" placeholder="请输入备注信息">
                      </el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </el-card>

            <el-card class="box-cardreny">
              <div slot="header" class="card-header">
                <span>保养人员</span>
              </div>

              <el-form :model="formDataren" label-width="120px" class="staff-form">
                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item label="保养班组：">
                      <el-input v-model="formDataren.team" disabled>
                      </el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="保养负责人：">
                      <el-input v-model="formDataren.leader" disabled>
                      </el-input>
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row :gutter="20">
                  <el-col :span="24">
                    <el-form-item label="其他保养人：">
                      <el-tag v-for="(staff, index) in formDataren.otherStaff" :key="index" class="staff-tag"
                        type="info">
                        {{ staff }}
                      </el-tag>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </el-card>

            <el-card class="box-cardji">
              <div slot="header" class="card-header">
                <span>基础信息</span>
              </div>

              <el-form :model="formDataji" label-width="140px" class="info-form">
                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item label="任务编号：">
                      <el-input v-model="formDataji.taskNo" disabled>
                      </el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="任务名称：">
                      <el-input v-model="formDataji.taskName" disabled>
                      </el-input>
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item label="计划名称：">
                      <el-input v-model="formDataji.planName" disabled>
                      </el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="任务计划序号：">
                      <el-input v-model="formDataji.planNo" disabled>
                      </el-input>
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item label="任务计划开始时间：">
                      <el-input v-model="formDataji.startTime" disabled>
                      </el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="任务计划结束时间：">
                      <el-input v-model="formDataji.endTime" disabled>
                      </el-input>
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item label="任务类型：">
                      <el-input v-model="formDataji.taskType" disabled>
                      </el-input>
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row :gutter="20">
                  <el-col :span="24">
                    <el-form-item label="备注：">
                      <el-input type="textarea" v-model="formDataji.remark" :rows="3" placeholder="请输入备注信息">
                      </el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </el-card>


          </el-tab-pane>
          <el-tab-pane label="保养明细" name="detail">
            <el-card class="box-cardqing">
              <div slot="header" class="card-header">
                <span>处理情况</span>
              </div>
              <el-form :model="formDataqing" label-width="120px" class="status-form">
                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item label="保养开始时间：">
                      <el-input v-model="formDataqing.startTime" disabled>
                      </el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="保养结束时间：">
                      <el-input v-model="formDataqing.endTime" disabled>
                      </el-input>
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item label="保养总用时：">
                      <el-input v-model="formDataqing.duration" disabled>
                      </el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="保养费用(元)：">
                      <el-input v-model="formDataqing.cost" disabled>
                      </el-input>
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row :gutter="20">
                  <el-col :span="24">
                    <el-form-item label="工作描述：">
                      <el-input type="textarea" v-model="formDataqing.description" :rows="4" placeholder="请输入工作描述">
                      </el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </el-card>
            <el-card class="box-card23">
              <div slot="header" class="card-header">
                <span>保养项目 (12项)</span>
              </div>
              <!-- 标签页 -->
              <el-tabs v-model="activeTab23">
                <el-tab-pane label="已保养项目" name="completed">
                  <div class="operation-bar">
                    <el-button type="primary" size="small" plain @click="handleExpor23t">
                      导出
                    </el-button>
                  </div>

                  <!-- 表格 -->
                  <el-table :data="tableData23" style="width: 100%">
                    <el-table-column type="selection" width="55">
                    </el-table-column>
                    <el-table-column prop="id" label="序号" width="80">
                    </el-table-column>
                    <el-table-column prop="name" label="保养项目" width="150">
                    </el-table-column>
                    <el-table-column prop="position" label="保养部位" width="150">
                    </el-table-column>
                    <el-table-column prop="level" label="保养等级" width="100">
                    </el-table-column>
                    <el-table-column prop="requirement" label="保养要求" width="150">
                    </el-table-column>
                    <el-table-column prop="status" label="是否保养" width="100">
                    </el-table-column>
                    <el-table-column prop="maintainer" label="保养人" width="100">
                    </el-table-column>
                    <el-table-column prop="type" label="类型" width="100">
                    </el-table-column>
                    <el-table-column prop="remark" label="备注">
                    </el-table-column>
                  </el-table>
                </el-tab-pane>
                <el-tab-pane label="未保养项目" name="pending">
                  <!-- 未保养项目的内容 -->
                </el-tab-pane>
              </el-tabs>
            </el-card>

            <el-card class="box-cardliang">
              <div slot="header" class="card-header">
                <span>工作量</span>
              </div>

              <!-- 人员标签页 -->
              <el-tabs v-model="activeTabliang">
                <el-tab-pane v-for="person in persons" :key="person" :label="person" :name="person">
                </el-tab-pane>
              </el-tabs>

              <!-- 操作栏 -->
              <div class="operation-bar">
                <el-button type="primary" size="small" plain @click="handleExportliang">
                  导出
                </el-button>
              </div>

              <!-- 表格 -->
              <el-table :data="tableDataliang" style="width: 100%">
                <el-table-column type="selection" width="55">
                </el-table-column>
                <el-table-column prop="id" label="序号" width="80">
                </el-table-column>
                <el-table-column prop="operation" label="操作" width="100">
                  <template slot-scope="scope">
                    <span style="color: #67C23A">{{ scope.row.operation }}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="type" label="类型" width="100">
                </el-table-column>
                <el-table-column prop="startTime" label="开始时间" width="180">
                </el-table-column>
                <el-table-column prop="endTime" label="完成时间" width="180">
                </el-table-column>
                <el-table-column prop="duration" label="保养用时" width="120">
                </el-table-column>
                <el-table-column prop="reason" label="暂停原因">
                </el-table-column>
                <el-table-column prop="content" label="保养内容">
                </el-table-column>
                <el-table-column prop="remark" label="备注">
                </el-table-column>
              </el-table>

              <!-- 总用时统计 -->
              <div class="total-time">
                <span>总用时：</span>
                <span class="time">{{ totalTime.hours }}</span>
                <span>小时</span>
                <span class="time">{{ totalTime.minutes }}</span>
                <span>分钟</span>
              </div>
            </el-card>
            <el-card class="box-cardzp">
              <div slot="header" class="card-header">
                <span>图片</span>
              </div>

              <div class="gallery-container">
                <div v-for="(image, index) in images" :key="index" class="image-item">
                  <el-image :src="image.url" :preview-src-list="imageUrls" fit="cover">
                    <div slot="error" class="image-slot">
                      <i class="el-icon-picture-outline"></i>
                    </div>
                    <!-- 预览图标 -->
                    <div v-if="image.showPreview" class="preview-overlay" @click="handlePreview(index)">
                      <i class="el-icon-view"></i>
                      <span>预览</span>
                    </div>
                  </el-image>
                </div>
              </div>
            </el-card>
          </el-tab-pane>
          <el-tab-pane label="验收信息" name="check">
            <el-card class="box-cardhe">
              <div slot="header" class="card-header">
                <span>验收信息</span>
              </div>

              <el-form :model="formDatahe" label-width="120px" class="info-form">
                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item label="验收人员：">
                      <el-input v-model="formDatahe.inspector" disabled>
                      </el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="所属部门：">
                      <el-input v-model="formDatahe.department" disabled>
                      </el-input>
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item label="验收结果：">
                      <el-input v-model="formDatahe.result" disabled>
                      </el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="保养评分：">
                      <el-rate v-model="formDatahe.rating" disabled show-score text-color="#ff9900">
                      </el-rate>
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item label="验收时间：">
                      <el-input v-model="formDatahe.inspectionTime" disabled>
                      </el-input>
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row :gutter="20">
                  <el-col :span="24">
                    <el-form-item label="保养评价：">
                      <el-input type="textarea" v-model="formDatahe.evaluation" :rows="4" placeholder="请输入保养评价">
                      </el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </el-card>
          </el-tab-pane>
        </el-tabs>
      </div>

      <!-- 已完成图标 -->
      <div class="completed-icon">
        <img src="" alt="已完成">
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'MaintenanceHeader',
  data() {
    return {
      formDatahe: {
        inspector: '赵晓明',
        department: '检验部门',
        result: '完成保养',
        rating: 3,
        inspectionTime: '2023.01.14 16:34:07',
        evaluation: ''
      },
      images: [
        {
          url: '/path/to/chocolate1.jpg',
          showPreview: false
        },
        {
          url: '/path/to/chocolate2.jpg',
          showPreview: true
        },
        {
          url: '/path/to/chocolate3.jpg',
          showPreview: false
        }
      ],
      activeTabliang: '宽惜君',
      persons: ['宽惜君', '李华', '张敏', '杨静', '赵嘉'],
      tableDataliang: [
        {
          id: 1,
          operation: '移除',
          type: '负责人',
          startTime: '2022-07-12 10:04:39',
          endTime: '2022-07-12 10:04:39',
          duration: '1小时30分钟',
          reason: '',
          content: '',
          remark: ''
        },
        // ... 更多数据
      ],
      totalTime: {
        hours: 0,
        minutes: 0
      },
      activeTab23: 'completed',
      tableData23: [
        {
          id: 1,
          name: '润滑油更换',
          position: '液压系统',
          level: '一级',
          requirement: '润滑',
          status: '已保养',
          maintainer: '赵薇',
          type: '负责人',
          remark: ''
        },
        {
          id: 2,
          name: '润滑油更换',
          position: '液压系统',
          level: '一级',
          requirement: '润滑',
          status: '已保养',
          maintainer: '浅笑',
          type: '保养人员',
          remark: ''
        },
        // ... 更多数据
      ],
      formDataqing: {
        startTime: '2022年6月17日 18:24',
        endTime: '2022年6月17日 18:24',
        duration: '1小时30分钟',
        cost: '300.00',
        description: ''
      },
      formDataji: {
        taskNo: 'T001',
        taskName: '润滑油更换',
        planName: '液压系统润滑保养计划',
        planNo: '02',
        startTime: '2022-07-18 08:00',
        endTime: '2022-07-18 10:00',
        taskType: '转派任务',
        remark: ''
      },
      formDataren: {
        team: '油光清面班组',
        leader: '问斌丝',
        otherStaff: ['李华', '张敏', '杨静', '赵嘉']
      },
      formData: {
        taskNo: 'T001',
        taskName: '润滑油更换',
        planName: '液压系统润滑保养计划',
        planNo: '02',
        startTime: '2022-07-18 08:00',
        endTime: '2022-07-18 10:00',
        taskType: '计划任务',
        remark: ''
      },
      activeTab: 'task',
      deviceInfo: {
        name: '液压泵',
        model: '液压设备',
        location: '车间A区',
        number: 'YP12345',
        type: 'HP-250',
        department: '生产部'
      }
    }
  },
  computed: {
    imageUrls() {
      return this.images.map(img => img.url)
    }
  },
  methods: {
    handlePreview(index) {
      // 处理图片预览
      console.log('预览图片:', index)
    },
    //工作量
    handleExportliang() {
      // 处理导出功能
      console.log('导出数据')
    },
    //包养项目
    handleExport23() {
      // 处理导出功能
      console.log('导出数据')
    },
    handleExport() {
      // 实现导出功能
      console.log('导出文件')
    },
    handlePrint() {
      // 实现打印功能
      console.log('打印文件')
    }
  }
}
</script>

<style scoped>
.box-cardhe {
  width: 1200px;
  margin-left: 10px;
  margin-bottom: 20px;
}

.box-cardzp {
  width: 1200px;
  margin-left: 10px;
  margin-bottom: 20px;
}

.box-cardliang {
  width: 1200px;
  margin-left: 10px;
  margin-bottom: 20px;
}

.image-gallery {
  padding: 20px;
}

.gallery-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.image-item {
  position: relative;
  width: 300px;
  height: 200px;
  border-radius: 4px;
  overflow: hidden;
}

.el-image {
  width: 100%;
  height: 100%;
}

.image-slot {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: #f5f7fa;
  color: #909399;
}

.preview-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fff;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.3s;
}

.preview-overlay:hover {
  opacity: 1;
}

.preview-overlay i {
  font-size: 24px;
  margin-bottom: 8px;
}

/* 响应式调整 */
@media screen and (max-width: 768px) {
  .image-gallery {
    padding: 10px;
  }

  .gallery-container {
    gap: 10px;
  }

  .image-item {
    width: 100%;
    height: 200px;
  }
}

/* 暗色主题适配 */
@media (prefers-color-scheme: dark) {
  .image-slot {
    background: #363636;
    color: #909399;
  }
}

.operation-bar {
  margin: 15px 0;
}

.total-time {
  margin-top: 20px;
  text-align: right;
  font-size: 14px;
}

.time {
  color: #F56C6C;
  font-size: 16px;
  margin: 0 5px;
}

/* 表格样式优化 */
:deep(.el-table th) {
  background-color: #f5f7fa;
  color: #606266;
}

:deep(.el-table td) {
  padding: 8px 0;
}

:deep(.el-table--border) {
  border-radius: 4px;
  overflow: hidden;
}

.box-card23 {
  width: 1200px;
  margin-left: 10px;
  margin-bottom: 20px;
}

.box-cardqing {
  width: 1200px;
  margin-left: 10px;
  margin-bottom: 20px;
}


.box-cardji {
  width: 1200px;
  margin-left: 10px;
  margin-bottom: 20px;
}

.box-cardreny {
  width: 1200px;
  margin-left: 10px;
  margin-bottom: 20px;
}

.box-cardxx {
  width: 1200px;
  margin-left: 10px;
  margin-bottom: 20px;
}

.box-cardcha {
  /* width: 1200px; */
  margin-left: 15px;
  margin-bottom: 20px;
}

.maintenance-header {
  padding: 20px;
}

.header-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.header-title h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 500;
}

.header-actions .el-button {
  margin-left: 10px;
}

.device-info {
  padding: 20px 0;
  border-bottom: 1px solid #EBEEF5;
}

.info-item {
  margin-bottom: 15px;
}

.info-item .label {
  color: #909399;
  margin-right: 8px;
}

.info-item .value {
  color: #303133;
}

.tabs-container {
  margin-top: 20px;
}

.completed-icon {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 100px;
  height: 100px;
  opacity: 0.8;
}

/* 响应式调整 */
@media screen and (max-width: 768px) {
  .maintenance-header {
    padding: 10px;
  }

  .header-title {
    flex-direction: column;
    align-items: flex-start;
  }

  .header-actions {
    margin-top: 10px;
  }

  .el-col {
    width: 100% !important;
    margin-bottom: 10px;
  }

  .completed-icon {
    width: 60px;
    height: 60px;
  }
}
</style>
